<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input 
    class="new-todo" 
    placeholder="What needs to be done?" 
    autofocus
    (keyup.enter)="addTodo($event)">
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <ng-template [ngIf]="todos.length">
  <section class="main">
    <input 
    id="toggle-all" 
    class="toggle-all"
    type="checkbox"
    [checked]="toggleAll"
    (change) = "toggleAll = $event.target">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li 
      *ngFor="let todo of filterTodos;let i=index;"
      [ngClass]="{
        completed:todo.done,
        editing:currentEditing === todo
      }">
        <div class="view">
          <input 
          class="toggle" 
          type="checkbox" 
          [(ngModel)]="todo.done">
          <label (dblclick)="currentEditing=todo">{{todo.title}}</label>
          <button 
          (click)="removeTodo(i)"
          class="destroy"></button>
        </div>
        <input 
        class="edit" 
        [value]="todo.title"
        (keyup)="handleEditKeyUp($event)"
        (keyup.enter)="saveEdit(todo,$event)"
        (blur)="currentEditing=defaultObject">
      </li>
    </ul>
  </section>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{remaningCount}}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a
        [ngClass]="{selected:visibility==='all'}" 
        href="#/">All</a>
      </li>
      <li>
        <a
        [ngClass]="{selected:visibility==='active'}"  
        href="#/active">Active</a>
      </li>
      <li>
        <a
        [ngClass]="{selected:visibility==='completed'}" 
        href="#/completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button 
    (click)="clearAllDone()"
    class="clear-completed">Clear completed</button>
  </footer>
  </ng-template>
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com">you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>